<template>
  <el-dialog :title="$t('message.tpjc')" :visible="true" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog" :before-close="cancel" append-to-body width="560px">
    <div class="cropper-content">
      <div class="cropper" style="text-align: center">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :output-size="option.outputSize"
          :output-type="option.outputType"
          :info="option.info"
          :can-scale="option.canScale"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :fixed="option.fixed"
          :fixed-box="option.fixedBox"
          :fixed-number="fixedNumber"
          :mode="option.mode"
          :full="true"
        />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('message.qx') }}</el-button>
      <el-button type="primary" :loading="loading" @click="finish">{{ $t('message.qr') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import { uploadFile, uploadFiles } from '@/api'
import store from '@/store'
export default {
  name: 'Cropper',
  components: { VueCropper },
  props: {
    optionImg: {
      type: String,
      default: ''
    },
    fixedNumber: {
      type: Array,
      // default: function () { return [] }
      default: () => [16, 10] // 截图框的宽高比例
    },
    useType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      modalDialog: store.getters.dialog,
      loading: false,
      formImage: '',
      folder: this.useType,
      pageMethods: uploadFile,
      form: {
        backgroundImage: ''
      },
      // 裁剪组件的基础配置option
      option: {
        img: this.optionImg, // 裁剪图片的地址
        info: false, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: '500', // 默认生成截图框宽度
        autoCropHeight: '500', // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: true, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove: true,
        mode: 'contain'
      }
    }
  },
  mounted() {
    // console.log(555, this.fileinfo);
  },
  methods: {
    cancel() {
      this.$emit('formClose', false)
    },
    // 将base64转换为blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    // 将blob转换为file
    blobToFile(theBlob, fileName = '111') {
      theBlob.lastModifiedDate = new Date()
      theBlob.name = fileName
      return theBlob
    },
    async finish() {
      this.loading = true
      const that = this
      this.$refs.cropper.getCropBlob((data) => {
        // const fileName = 'bc' + this.fileinfo.uid + '.jpg'
        that.formImage = data
        // var file = data
        const formData = new FormData()
        const myFile = new File([data], 'photo.png', { type: data.type })
        formData.append('file', myFile)
        formData.append('folder', that.folder)
        // 文件对象
        // 获取卡类型列表
        // return;
        uploadFiles(formData)
          .then((res) => {
            that.loading = false
            this.$emit('formSubmit', {
              insertUrl: res.insertUrl,
              showUrl: res.showUrl,
              success: res.success
            })
          })
          .catch((err) => {
            console.log('err', err)
            that.loading = false
          })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.cropper-content {
  width: 100%;
  height: 500px;
  background: pink;
}

.cropper {
  width: 100%;
  height: 500px;
  background: yellow;
}
</style>
